இணையதள செயல்திறனை மேம்படுத்தவும் பயனர் அனுபவத்தை அதிகரிக்கவும் டைனமிக் இம்போர்ட்ஸ் மற்றும் வெப்பேக் உள்ளமைவுகள் போன்ற ஜாவாஸ்கிரிப்ட் கோட் ஸ்பிளிட்டிங் நுட்பங்களை ஆராயுங்கள். உலகளாவிய டெவலப்பர்களுக்கான ஒரு விரிவான வழிகாட்டி.
ஜாவாஸ்கிரிப்ட் கோட் ஸ்பிளிட்டிங்: டைனமிக் லோடிங் vs. செயல்திறன் மேம்படுத்தல்
வலை மேம்பாட்டின் எப்போதும் மாறிவரும் உலகில், தடையற்ற மற்றும் செயல்திறன் மிக்க பயனர் அனுபவத்தை வழங்குவது மிக முக்கியமானது. ஜாவாஸ்கிரிப்ட், நவீன வலைப் பயன்பாடுகளின் முதுகெலும்பாக இருப்பதால், பக்க ஏற்றுதல் நேரங்களில் பெரும்பாலும் குறிப்பிடத்தக்க பங்களிப்பை அளிக்கிறது. பெரிய ஜாவாஸ்கிரிப்ட் பண்டல்கள் மெதுவான ஆரம்ப ஏற்றுதலுக்கு வழிவகுக்கும், இது பயனர் ஈடுபாடு மற்றும் ஒட்டுமொத்த திருப்தியைப் பாதிக்கிறது. இங்குதான் கோட் ஸ்பிளிட்டிங் மீட்புக்கு வருகிறது. இந்த விரிவான வழிகாட்டி ஜாவாஸ்கிரிப்ட் கோட் ஸ்பிளிட்டிங்கின் நுணுக்கங்களை ஆராய்ந்து, அதன் நன்மைகள், வெவ்வேறு நுட்பங்கள் மற்றும் நடைமுறைச் செயல்படுத்தல் உத்திகளை, குறிப்பாக டைனமிக் லோடிங்கில் கவனம் செலுத்தி விவரிக்கும்.
கோட் ஸ்பிளிட்டிங் என்றால் என்ன?
கோட் ஸ்பிளிட்டிங் என்பது உங்கள் ஜாவாஸ்கிரிப்ட் கோடை சிறிய, நிர்வகிக்கக்கூடிய துண்டுகளாக அல்லது பண்டல்களாகப் பிரிக்கும் ஒரு நுட்பமாகும். ஆரம்ப பக்க ஏற்றுதலில் ஒரு பெரிய ஜாவாஸ்கிரிப்ட் கோப்பை ஏற்றுவதற்குப் பதிலாக, கோட் ஸ்பிளிட்டிங் ஆரம்ப ரெண்டரிங்கிற்குத் தேவையான கோடை மட்டும் ஏற்றி, மற்ற பகுதிகள் உண்மையில் தேவைப்படும்போது ஏற்றுவதை ஒத்திவைக்க உங்களை அனுமதிக்கிறது. இந்த அணுகுமுறை ஆரம்ப பண்டலின் அளவைக் கணிசமாகக் குறைத்து, வேகமான பக்க ஏற்றுதல் நேரங்களுக்கும் மற்றும் பதிலளிக்கக்கூடிய பயனர் இடைமுகத்திற்கும் வழிவகுக்கிறது.
இதை இப்படி நினைத்துப் பாருங்கள்: நீங்கள் ஒரு பார்சலை அனுப்புகிறீர்கள். எல்லாவற்றையும் ஒரு பெரிய பெட்டியில் அடைப்பதற்குப் பதிலாக, அதை சிறிய, நிர்வகிக்கக்கூடிய பெட்டிகளாகப் பிரிக்கிறீர்கள், ஒவ்வொன்றிலும் தொடர்புடைய பொருட்கள் உள்ளன. நீங்கள் மிக முக்கியமான பெட்டியை முதலில் அனுப்பி, மற்றவற்றை தேவைக்கேற்ப பின்னர் அனுப்புகிறீர்கள். இது கோட் ஸ்பிளிட்டிங் எவ்வாறு செயல்படுகிறது என்பதற்கு ஒப்பானது.
கோட் ஸ்பிளிட்டிங் ஏன் முக்கியமானது?
கோட் ஸ்பிளிட்டிங்கின் நன்மைகள் பல மற்றும் அவை உங்கள் வலைப் பயன்பாட்டின் பயனர் அனுபவத்தையும் ஒட்டுமொத்த செயல்திறனையும் நேரடியாகப் பாதிக்கின்றன:
- மேம்படுத்தப்பட்ட ஆரம்ப ஏற்றுதல் நேரம்: ஆரம்ப பண்டலின் அளவைக் குறைப்பதன் மூலம், கோட் ஸ்பிளிட்டிங் பக்கம் ஊடாடும் நிலையை அடைய எடுக்கும் நேரத்தை கணிசமாக வேகப்படுத்துகிறது. இது பயனர் கவனத்தை ஈர்ப்பதற்கும் மற்றும் பவுன்ஸ் விகிதங்களைத் தடுப்பதற்கும் முக்கியமானது.
- மேம்படுத்தப்பட்ட பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரங்கள் ஒரு மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்திற்கு வழிவகுக்கிறது. பயனர்கள் பயன்பாட்டை வேகமாகவும் திறமையாகவும் உணர்கிறார்கள்.
- குறைக்கப்பட்ட அலைவரிசை நுகர்வு: தேவையான கோடை மட்டும் ஏற்றுவதன் மூலம், கோட் ஸ்பிளிட்டிங் நெட்வொர்க்கில் மாற்றப்படும் தரவின் அளவைக் குறைக்கிறது, இது குறைந்த அலைவரிசை உள்ள பயனர்களுக்கும் அல்லது மோசமான இணைப்பு உள்ள பகுதிகளில் மொபைல் சாதனங்களில் உள்ளவர்களுக்கும் மிகவும் முக்கியமானது.
- சிறந்த கேச் பயன்பாடு: கோடை சிறிய துண்டுகளாகப் பிரிப்பது உலாவிகளை உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகளை மிகவும் திறம்பட கேச் செய்ய அனுமதிக்கிறது. பயனர்கள் வெவ்வேறு பிரிவுகளுக்கு அல்லது பக்கங்களுக்குச் செல்லும்போது, தேவையான கோடை மட்டும் பதிவிறக்கினால் போதும், ஏனெனில் மற்ற பகுதிகள் ஏற்கனவே கேச் செய்யப்பட்டிருக்கலாம். ஒரு உலகளாவிய இ-காமர்ஸ் தளத்தை கற்பனை செய்து பாருங்கள்; ஐரோப்பாவில் உள்ள பயனர்கள் ஆசியாவில் உள்ள பயனர்களை விட வேறுபட்ட தயாரிப்பு பட்டியல்களுடன் தொடர்பு கொள்ளலாம். கோட் ஸ்பிளிட்டிங் தொடர்புடைய பட்டியல் கோடை மட்டும் ஆரம்பத்தில் பதிவிறக்கம் செய்வதை உறுதிசெய்கிறது, இரு பயனர் குழுக்களுக்கும் அலைவரிசையை மேம்படுத்துகிறது.
- மொபைலுக்கு உகந்தது: மொபைல்-முதல் சகாப்தத்தில், செயல்திறனை மேம்படுத்துவது மிக முக்கியம். கோட் ஸ்பிளிட்டிங் மொபைல் சொத்துக்களின் அளவைக் குறைப்பதிலும், மெதுவான நெட்வொர்க்குகளில் கூட மொபைல் சாதனங்களில் ஏற்றுதல் நேரங்களை மேம்படுத்துவதிலும் முக்கிய பங்கு வகிக்கிறது.
கோட் ஸ்பிளிட்டிங்கின் வகைகள்
முக்கியமாக இரண்டு வகையான கோட் ஸ்பிளிட்டிங் உள்ளன:
- கூறு-அடிப்படையிலான பிரித்தல்: உங்கள் பயன்பாட்டில் உள்ள தனிப்பட்ட கூறுகள் அல்லது மாட்யூல்களின் அடிப்படையில் கோடைப் பிரித்தல். இது பெரும்பாலும் பெரிய, சிக்கலான பயன்பாடுகளுக்கு மிகவும் பயனுள்ள அணுகுமுறையாகும்.
- பாதை-அடிப்படையிலான பிரித்தல்: உங்கள் பயன்பாட்டில் உள்ள வெவ்வேறு பாதைகள் அல்லது பக்கங்களின் அடிப்படையில் கோடைப் பிரித்தல். இது தற்போதைய பாதைக்குத் தேவையான கோடு மட்டுமே ஏற்றப்படுவதை உறுதி செய்கிறது.
கோட் ஸ்பிளிட்டிங்கை செயல்படுத்துவதற்கான நுட்பங்கள்
ஜாவாஸ்கிரிப்ட் பயன்பாடுகளில் கோட் ஸ்பிளிட்டிங்கை செயல்படுத்த பல நுட்பங்களைப் பயன்படுத்தலாம்:
- டைனமிக் இம்போர்ட்ஸ் (
import()):டைனமிக் இம்போர்ட்ஸ் கோட் ஸ்பிளிட்டிங்கை செயல்படுத்துவதற்கான மிகவும் நவீனமான மற்றும் பரிந்துரைக்கப்பட்ட வழியாகும். அவை ஜாவாஸ்கிரிப்ட் மாட்யூல்களை ரன்டைமில் ஒத்திசைவற்ற முறையில் ஏற்ற உங்களை அனுமதிக்கின்றன, கோட் எப்போது, எப்படி ஏற்றப்படுகிறது என்பதன் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகின்றன.
எடுத்துக்காட்டு:
// முன்பு: // import MyComponent from './MyComponent'; // பிறகு (டைனமிக் இம்போர்ட்): async function loadMyComponent() { const { default: MyComponent } = await import('./MyComponent'); // MyComponent-ஐ இங்கே பயன்படுத்தவும் } // உங்களுக்கு கூறு தேவைப்படும்போது இந்த செயல்பாட்டை அழைக்கவும் loadMyComponent();இந்த எடுத்துக்காட்டில்,
loadMyComponent()செயல்பாடு அழைக்கப்படும்போது மட்டுமேMyComponentமாட்யூல் ஏற்றப்படுகிறது. இது ஒரு பயனர் தொடர்பு, ஒரு பாதை மாற்றம் அல்லது வேறு எந்த நிகழ்வாலும் தூண்டப்படலாம்.டைனமிக் இம்போர்ட்ஸின் நன்மைகள்:
- ஒத்திசைவற்ற ஏற்றுதல்: மாட்யூல்கள் பிரதான திரெட்டைத் தடுக்காமல் பின்னணியில் ஏற்றப்படுகின்றன.
- நிபந்தனைக்குட்பட்ட ஏற்றுதல்: குறிப்பிட்ட நிபந்தனைகள் அல்லது பயனர் தொடர்புகளின் அடிப்படையில் மாட்யூல்களை ஏற்றலாம்.
- பண்ட்லர்களுடன் ஒருங்கிணைப்பு: பெரும்பாலான நவீன பண்டலர்கள் (webpack மற்றும் Parcel போன்றவை) டைனமிக் இம்போர்ட்ஸ்களை உடனடியாக ஆதரிக்கின்றன.
- வெப்பேக் உள்ளமைவு:
வெப்பேக், ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் மாட்யூல் பண்ட்லர், கோட் ஸ்பிளிட்டிங்கிற்கு சக்திவாய்ந்த அம்சங்களை வழங்குகிறது. நுழைவுப் புள்ளிகள், மாட்யூல் அளவு மற்றும் சார்புநிலைகள் போன்ற பல்வேறு அளவுகோல்களின் அடிப்படையில் உங்கள் கோடை தானாகப் பிரிக்க வெப்பேக்கை நீங்கள் உள்ளமைக்கலாம்.
வெப்பேக்கின்
splitChunksஉள்ளமைவு விருப்பம்:வெப்பேக்கிற்குள் கோட் ஸ்பிளிட்டிங்கிற்கான முதன்மை பொறிமுறை இதுவாகும். பகிரப்பட்ட சார்புநிலைகள் அல்லது மாட்யூல் அளவின் அடிப்படையில் தனித்தனி துண்டுகளை உருவாக்குவதற்கான விதிகளை வரையறுக்க இது உங்களை அனுமதிக்கிறது.
எடுத்துக்காட்டு (webpack.config.js):
module.exports = { // ... பிற வெப்பேக் உள்ளமைவுகள் optimization: { splitChunks: { chunks: 'all', // அனைத்து துண்டுகளையும் பிரி (async மற்றும் initial) cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, // node_modules-இல் இருந்து மாட்யூல்களைப் பொருத்து name: 'vendors', // உருவாகும் துண்டின் பெயர் chunks: 'all', }, }, }, }, };இந்த எடுத்துக்காட்டில்,
node_modulesகோப்பகத்தில் இருந்து அனைத்து மாட்யூல்களையும் கொண்டvendorsஎன்ற தனி துண்டை உருவாக்க வெப்பேக் உள்ளமைக்கப்பட்டுள்ளது. இது உங்கள் பயன்பாட்டுக் கோடிலிருந்து மூன்றாம் தரப்பு நூலகங்களைப் பிரிப்பதற்கான ஒரு பொதுவான நடைமுறையாகும், இது உலாவிகளை அவற்றை தனித்தனியாக கேச் செய்ய அனுமதிக்கிறது.splitChunks-க்கான உள்ளமைவு விருப்பங்கள்:chunks: பிரிப்பதற்கு எந்த துண்டுகள் கருதப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது ('all','async', அல்லது'initial').minSize: ஒரு துண்டு உருவாக்கப்படுவதற்கு குறைந்தபட்ச அளவை (பைட்டுகளில்) அமைக்கிறது.maxSize: ஒரு துண்டுக்கான அதிகபட்ச அளவை (பைட்டுகளில்) அமைக்கிறது.minChunks: ஒரு மாட்யூல் பிரிக்கப்படுவதற்கு முன்பு அதைப் பகிர வேண்டிய குறைந்தபட்ச துண்டுகளின் எண்ணிக்கையைக் குறிப்பிடுகிறது.maxAsyncRequests: ஆன்-டிமாண்ட் லோடிங்கின் போது இணையான கோரிக்கைகளின் எண்ணிக்கையை வரம்புக்குட்படுத்துகிறது.maxInitialRequests: ஒரு நுழைவுப் புள்ளியில் இணையான கோரிக்கைகளின் எண்ணிக்கையை வரம்புக்குட்படுத்துகிறது.automaticNameDelimiter: பிரிக்கப்பட்ட துண்டுகளுக்கான பெயர்களை உருவாக்கப் பயன்படுத்தப்படும் பிரிப்பான்.name: பிரிக்கப்பட்ட துண்டின் பெயரை உருவாக்கும் ஒரு செயல்பாடு.cacheGroups: பல்வேறு அளவுகோல்களின் அடிப்படையில் (எ.கா., வெண்டார் நூலகங்கள், பகிரப்பட்ட கூறுகள்) குறிப்பிட்ட துண்டுகளை உருவாக்குவதற்கான விதிகளை வரையறுக்கிறது. இது மிகவும் சக்திவாய்ந்த மற்றும் நெகிழ்வான விருப்பமாகும்.
வெப்பேக் உள்ளமைவின் நன்மைகள்:
- தானியங்கி கோட் ஸ்பிளிட்டிங்: முன்வரையறுக்கப்பட்ட விதிகளின் அடிப்படையில் வெப்பேக் உங்கள் கோடை தானாகப் பிரிக்க முடியும்.
- நுணுக்கமான கட்டுப்பாடு: பல்வேறு உள்ளமைவு விருப்பங்களைப் பயன்படுத்தி பிரிக்கும் செயல்முறையை நீங்கள் நுட்பமாக சரிசெய்யலாம்.
- பிற வெப்பேக் அம்சங்களுடன் ஒருங்கிணைப்பு: கோட் ஸ்பிளிட்டிங், ட்ரீ ஷேக்கிங் மற்றும் மினிஃபிகேஷன் போன்ற பிற வெப்பேக் அம்சங்களுடன் தடையின்றி செயல்படுகிறது.
- React.lazy மற்றும் Suspense (React பயன்பாடுகளுக்கு):
நீங்கள் ஒரு React பயன்பாட்டை உருவாக்குகிறீர்கள் என்றால், கோட் ஸ்பிளிட்டிங்கை எளிதாக செயல்படுத்த
React.lazyமற்றும்Suspenseகூறுகளைப் பயன்படுத்தலாம்.React.lazyஉங்களை React கூறுகளை டைனமிக்காக இறக்குமதி செய்ய அனுமதிக்கிறது, மேலும்Suspenseகூறு ஏற்றப்படும்போது ஒரு ஃபால்பேக் UI-ஐ (எ.கா., ஒரு லோடிங் இண்டிகேட்டர்) காண்பிக்க ஒரு வழியை வழங்குகிறது.எடுத்துக்காட்டு:
import React, { Suspense } from 'react'; const MyComponent = React.lazy(() => import('./MyComponent')); function MyPage() { return (Loading...
இந்த எடுத்துக்காட்டில், MyComponent கூறு React.lazy ஐப் பயன்படுத்தி டைனமிக்காக ஏற்றப்படுகிறது. Suspense கூறு, கூறு ஏற்றப்படும்போது ஒரு லோடிங் இண்டிகேட்டரைக் காட்டுகிறது.
React.lazy மற்றும் Suspense-இன் நன்மைகள்:
- எளிய மற்றும் அறிவிப்பு தொடரியல்: குறைந்தபட்ச கோட் மாற்றங்களுடன் கோட் ஸ்பிளிட்டிங்கை செயல்படுத்தலாம்.
- React உடன் தடையற்ற ஒருங்கிணைப்பு:
React.lazyமற்றும்Suspenseஉள்ளமைக்கப்பட்ட React அம்சங்கள். - மேம்படுத்தப்பட்ட பயனர் அனுபவம்:
Suspenseகூறு ஒரு லோடிங் இண்டிகேட்டரைக் காண்பிக்க ஒரு வழியை வழங்குகிறது, கூறு ஏற்றப்படும்போது பயனர்கள் ஒரு வெற்றுத் திரையைப் பார்ப்பதைத் தடுக்கிறது.
டைனமிக் லோடிங் vs. ஸ்டேடிக் லோடிங்
டைனமிக் மற்றும் ஸ்டேடிக் லோடிங்கிற்கு இடையிலான முக்கிய வேறுபாடு கோட் எப்போது ஏற்றப்படுகிறது என்பதில் உள்ளது:
- ஸ்டேடிக் லோடிங்: அனைத்து ஜாவாஸ்கிரிப்ட் கோடும் ஆரம்ப பண்டலில் சேர்க்கப்பட்டு, பக்கம் முதலில் ஏற்றப்படும்போது ஏற்றப்படும். இது மெதுவான ஆரம்ப ஏற்றுதல் நேரங்களுக்கு வழிவகுக்கும், குறிப்பாக பெரிய பயன்பாடுகளுக்கு.
- டைனமிக் லோடிங்: கோட் தேவைக்கேற்ப, அது தேவைப்படும்போது மட்டுமே ஏற்றப்படும். இது ஆரம்ப பண்டலின் அளவைக் குறைத்து ஆரம்ப ஏற்றுதல் நேரங்களை மேம்படுத்துகிறது.
செயல்திறனை மேம்படுத்துவதற்கு பொதுவாக டைனமிக் லோடிங் விரும்பப்படுகிறது, ஏனெனில் இது ஆரம்பத்தில் தேவையான கோடை மட்டுமே ஏற்றுவதை உறுதி செய்கிறது. இது ஒற்றைப் பக்க பயன்பாடுகள் (SPAs) மற்றும் பல அம்சங்களைக் கொண்ட சிக்கலான வலைப் பயன்பாடுகளுக்கு மிகவும் முக்கியமானது.
கோட் ஸ்பிளிட்டிங்கை செயல்படுத்துதல்: ஒரு நடைமுறை எடுத்துக்காட்டு (React மற்றும் Webpack)
Webpack ஐப் பயன்படுத்தி ஒரு React பயன்பாட்டில் கோட் ஸ்பிளிட்டிங்கை செயல்படுத்துவதற்கான ஒரு நடைமுறை எடுத்துக்காட்டைப் பார்ப்போம்.
- திட்ட அமைப்பு:
Create React App அல்லது உங்களுக்கு விருப்பமான அமைப்பைப் பயன்படுத்தி ஒரு புதிய React திட்டத்தை உருவாக்கவும்.
- சார்புநிலைகளை நிறுவுதல்:
webpackமற்றும்webpack-cliடெவலப்மெண்ட் சார்புநிலைகளாக நிறுவப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.npm install --save-dev webpack webpack-cli - கூறு அமைப்பு:
சில React கூறுகளை உருவாக்கவும், இதில் நீங்கள் டைனமிக்காக ஏற்ற விரும்பும் ஒன்று அல்லது அதற்கு மேற்பட்டவை அடங்கும். எடுத்துக்காட்டாக:
// MyComponent.js import React from 'react'; function MyComponent() { returnThis is MyComponent!; } export default MyComponent; - React.lazy மற்றும் Suspense உடன் டைனமிக் இம்போர்ட்:
உங்கள் முக்கிய பயன்பாட்டு கூறில் (எ.கா.,
App.js),MyComponent-ஐ டைனமிக்காக இறக்குமதி செய்யReact.lazyஐப் பயன்படுத்தவும்:// App.js import React, { Suspense } from 'react'; const MyComponent = React.lazy(() => import('./MyComponent')); function App() { return (}>My App
Loading MyComponent...